<!--------------------------------
 - @Author: Ronnie Zhang
 - @LastEditor: Ronnie Zhang
 - @LastEditTime: 2023/12/05 21:29:56
 - @Email: zclzone@outlook.com
 - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 --------------------------------->

<template>
  <CommonPage>
    <template #action />

    <MeCrud
      ref="$table" v-model:query-items="queryItems" :scroll-x="1200" :columns="columns" :get-data="api.read"
      :process-data="processDataMeCrud"
    >
      <MeQueryItem label="商品名" :label-width="50">
        <n-input v-model:value="queryItems.goodsName" type="text" placeholder="请输入用户名" clearable />
      </MeQueryItem>
    </MeCrud>
  </CommonPage>
  <!-- -----------------新增商品属性------------------------ -->
  <MeModal ref="$modalPayRecord">
    <n-form
      :model="modalPayRecordForm" :rules="rules" label-placement="left" label-width="auto"
      require-mark-placement="right-hanging"
    >
      <n-form-item label="付款单">
        <n-input v-model:value="modalPayRecordForm.payOrderNum" :disabled="true" />
      </n-form-item>
      <n-form-item label="付款金额">
        <n-input-number v-model:value="modalPayRecordForm.payAmount">
          <template #suffix>
            元
          </template>
        </n-input-number>
      </n-form-item>
      <n-form-item label="付款备注">
        <n-input v-model:value="modalPayRecordForm.remark" />
      </n-form-item>
    </n-form>
  </MeModal>
</template>

<script setup>
import { MeCrud, MeModal, MeQueryItem } from '@/components'
import { useModal } from '@/composables'
import { NButton } from 'naive-ui'
import api from './api'

defineOptions({ name: 'GoodsMgt' })
const [$modalPayRecord] = useModal()
const $table = ref(null)
/** QueryBar筛选参数（可选） */
const queryItems = ref({})
const modalPayRecordForm = ref({})

onMounted(() => {
  $table.value?.handleSearch()
})

const columns = [
  {
    title: '订单类型',
    key: 'payForTypeName',
    width: 150,
    rowSpan: (rowData) => {
      if (rowData.rowSpan) {
        return rowData.rowNum
      }
      else {
        return 1
      }
    },
  },
  {
    title: '订单对象',
    width: 150,
    render(row) {
      if (row.payForType === 2) { // 会员卡
        return row.payForEntity.mobile
      }
      if (row.payForType === 1) { // 销售订单
        return row.payForEntity.orderNum
      }
    },
    rowSpan: (rowData) => {
      if (rowData.rowSpan) {
        return rowData.rowNum
      }
      else {
        return 1
      }
    },
  },
  {
    title: '金额',
    key: 'payAmount',
    width: 100,
    rowSpan: (rowData) => {
      if (rowData.rowSpan) {
        return rowData.rowNum
      }
      else {
        return 1
      }
    },
  },
  {
    title: '已支付',
    key: 'paidAmount',
    width: 80,
    rowSpan: (rowData) => {
      if (rowData.rowSpan) {
        return rowData.rowNum
      }
      else {
        return 1
      }
    },
  },
  {
    title: '收款状态',
    key: 'payOrderStatusName',
    width: 80,
    rowSpan: (rowData) => {
      if (rowData.rowSpan) {
        return rowData.rowNum
      }
      else {
        return 1
      }
    },
  },
  {
    title: '创建时间',
    key: 'createTime',
    width: 180,
  },
  {
    title: '支付方式',
    key: 'recordPayMethodTypeName',
    width: 150,
  },
  {
    title: '支付金额',
    key: 'recordPayAmount',
    width: 150,
  },
  {
    title: '支付状态',
    key: 'recordPayStatus',
    width: 150,
  },
  {
    title: '创建时间',
    key: 'recordCreateTime',
    width: 180,
  },
  {
    title: '操作',
    key: 'actions',
    width: 320,
    hideInExcel: true,
    render(row) {
      return [
        h(
          NButton,
          {
            size: 'small',
            type: 'error',
            secondary: true,
            onClick: () => openModalPayRecord(row),
          },
          {
            default: () => '支付',
            icon: () => h('i', { class: 'i-carbon:user-role text-14' }),
          },
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'error',
            secondary: true,
            onClick: () => openModalPayRecord(row),
          },
          {
            default: () => '详情',
            icon: () => h('i', { class: 'i-carbon:user-role text-14' }),
          },
        ),
      ]
    },
  },
]
/**
 * 数据加工后返回
 * processDataMeCrud
 */
function processDataMeCrud(data) {
  // 转换后的数据
  const transformedData = []

  // 遍历原始数据的每个对象
  data.forEach((item) => {
    if (!item.payOrderRecords) {
      transformedData.push(item)
      return transformedData
    }
    item.payOrderRecords.forEach((item2) => {
      const newData = {
        ...item,
        recordId: item2.id,
        recordPayAmount: item2.payAmount,
        recordPayStatus: item2.payStatus,
        recordPayMethodTypeName: item2.payMethodTypeName,
        recordCreateTime: item2.createTime,
      }
      // 控制合并逻辑
      if (!item.rowSpan) {
        item.rowSpan = true
        newData.rowSpan = true // 设置合并
        newData.rowNum = item.payOrderRecords.length // 合并的行数
      }
      transformedData.push(newData)
    })
  })
  return transformedData
}
function openModalPayRecord(row) {
  const payOrderRecords = row
  modalPayRecordForm.value = {
    payOrderId: payOrderRecords.id,
    payOrderNum: payOrderRecords.orderNum,
    payAmount: payOrderRecords.payAmount - payOrderRecords.paidAmount,
  }
  $modalPayRecord.value?.open({
    title: '新增支付',
    width: '400px',
    okText: '确定',
    cancelText: '取消',
    async onOk() {
      api.addPayRecord(modalPayRecordForm.value)
      $table.value?.handleSearch()
    },
    onCancel(message) {
      $message.info(message ?? '已取消')
    },
  })
}
</script>
